<template>
  <div class="login-container" style="position: relative">
    <img src="@/assets/back.png" alt="" style="width: 100vw; height: 100vh" />
    <div style="width: 100%; position: absolute; top: 23%">
      <div
        style="
          width: 100px;
          height: 100px;
          background: #ffffff;
          transform: rotate(45deg);
          position: relative;
          box-shadow: 5px 5px 5px 5px #e9f1fe;
          border-radius: 15px;
          margin: 0 auto;
          margin-top: 10px;
        "
      >
        <img
          src="@/assets/logo.png"
          alt="logo"
          width="80%"
          height="80%"
          style="
            position: absolute;
            transform: rotate(-45deg);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
          "
        />
      </div>
      <div class="login-input" style="margin-top: 10%">
        <van-form>
          <van-field
            size="large"
            v-model="userInfo.userName"
            left-icon="manager"
            placeholder="请输入账号"
            type="text"
            label="账号"
          />

          <van-field
            size="large"
            left-icon="lock"
            v-model="userInfo.password"
            placeholder="请输入密码"
            type="password"
            @keydown.enter="login()"
            label="密码"
          />
        </van-form>
      </div>
      <div class="login-btn">
        <van-button @click="login()" v-show="!loading" block type="info"
          >登录</van-button
        >
        <van-button
          disabled
          v-show="loading"
          block
          loading
          type="info"
          loading-text="正在登录..."
        />
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";

import { Field, Form, Divider, Tab, Tabs } from "vant";
import VolHeader from "@/components/VolHeader.vue";
export default {
  components: {
    "van-form": Form,
    "van-tabs": Tabs,
    "van-tab": Tab,
    "vol-header": VolHeader,
    "van-field": Field,
    "van-divider": Divider,
  },
  data() {
    return {
      codeImgSrc: "",
      loading: false,
      userInfo: {
        userName: "",
        password: "",
      },
    };
  },
  created() {
    localStorage.clear();

    // this.getVierificationCode();
  },
  methods: {
    // getVierificationCode() {
    //   this.http.post("api/User/getVierificationCode").then(x => {
    //     this.codeImgSrc = "data:image/png;base64," + x.img;
    //     this.userInfo.UUID = x.uuid;
    //   });
    // },
    login() {
      if (this.userInfo.userName == "" || this.userInfo.userName.trim() == "")
        return Toast("请输入用户名");
      if (this.userInfo.password == "" || this.userInfo.password.trim() == "")
        return Toast("请输入密码");

      this.loading = true;
      let url = "/Base_Manage/Home/SubmitLogin";
      this.http.post(url, this.userInfo).then((x) => {
        this.$toast("登录成功");

        if (!x.Success) {
          this.loading = false;

          Toast(x.Msg);

          // this.getVierificationCode();
          return;
        }
        // 用户数据
        this.http.post("/Base_Manage/Home/GetOperatorInfo").then((res) => {
          console.log(res.Data.Permissions);
          localStorage.setItem(
            "Permissions",
            JSON.stringify(res.Data.Permissions)
          );
        });
        this.$store.commit("setUserInfo", x.Data);
        let _lastPage = this.$store.getters.data().lastPage || "/grid";
        this.$router.push({
          path: _lastPage == "/login" ? "/grid" : _lastPage,
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.center {
  text-align: center;
}
.boximg {
  text-align: center;
}
h2 {
  padding-left: 40px;
  padding-top: 1rem;
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: 500;
  text-align: left;
}
.login-container {
  width: 100vw;
  height: 100vh;

  .login-logo {
    text-align: center;
    img {
      width: 100%;
    }
  }
  .login-input {
    padding: 1rem 1.5rem;
    img {
      height: 20px;
      position: relative;
    }
  }
  .login-btn {
    padding: 1rem 1.5rem;
    > button {
      border-radius: 7px;
    }
  }
  .register {
    text-align: right;
    a {
      color: #a7a7a7;
      padding-right: 1rem;
      font-size: 13px;
    }
  }
  .login-account {
    position: relative;
    padding: 0rem 1.7rem;
    color: #afafaf;
    font-size: 13px;
    a:last-child {
      float: right;
    }
  }
  .login-line {
    margin-top: 1rem;
  }
  .login-other {
    display: flex;
    .item {
      img {
        height: 50px;
      }
      flex: 1;
      text-align: center;
      margin-top: 8px;
      padding: 0 4px;
      color: #646566;
      font-size: 12px;
    }
  }
}
.footer {
  // position: fixed;
  width: 100%;
  bottom: 0;
  // padding: 0 16px;
  margin: 48px 0 24px;
  text-align: center;

  // .links {
  //   margin-bottom: 8px;
  //   font-size: 14px;

  //   a {
  //     color: rgba(0, 0, 0, 0.45);
  //     transition: all 0.3s;

  //     &:not(:last-child) {
  //       margin-right: 40px;
  //     }
  //   }
  // }

  .copyright {
    margin-top: 150px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    a {
      color: rgba(0, 0, 0, 0.45);
      transition: all 0.3s;
    }
  }
}
</style>
